function runAmimation(className) {
    $(className).removeClass('rubberBand animated').addClass('rubberBand animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $(this).removeClass('rubberBand animated');
    });
};
var vm = avalon.define({
    $id: "demoBox",
    boxRigth: '',
    boxTop: '',
    boxLeft: '',
    boxButtom: '',
    selectTitle: function (title, type) {
        if (title == '旅游及酒店咨询服务') {
            vm.boxTop = '酒店开发期服务';
            vm.boxRigth = '酒店筹备期服务';
            vm.boxButtom = '酒店营运期服务';
            runAmimation('.top');
            runAmimation('.right');
            runAmimation('.buttom');
        } else if (title == '酒店资产管理服务') {
            vm.boxTop = '酒店营运期服务';
            vm.boxLeft = '酒店重新定位及改造';
            vm.boxButtom = '酒店资产退出';
            runAmimation('.top');
            runAmimation('.left');
            runAmimation('.buttom');
        } else {
            alert(title);
        }
    }

})

avalon.ready(function () {

})
avalon.config({
    debug: false
})
$(document).ready(function () {
    $.fn.extend({
        animateCss: function (animationName, callback) {
            var animationEnd = (function (el) {
                var animations = {
                    animation: 'animationend',
                    OAnimation: 'oAnimationEnd',
                    MozAnimation: 'mozAnimationEnd',
                    WebkitAnimation: 'webkitAnimationEnd',
                };

                for (var t in animations) {
                    if (el.style[t] !== undefined) {
                        return animations[t];
                    }
                }
            })(document.createElement('div'));

            this.addClass('animated ' + animationName).one(animationEnd, function () {
                $(this).removeClass('animated ' + animationName);

                if (typeof callback === 'function') callback();
            });

            return this;
        },
    });
    $('.container').addClass('flashing');
    // hover
    $(".area").hover(
        function (e) {
            e.preventDefault();
            // if (e.currentTarget.className == 'blueArea box') {}
            // vm.boxLeft = "旅游及酒店咨询服务";
            // vm.boxRigth = "酒店资产管理服务"
            $('.container').removeClass('flashing');
            runAmimation('.boxAnimation');
        },
        function (e) {
            $('.container').addClass('flashing');
            vm.boxLeft = "";
            vm.boxRigth = "";
            vm.boxButtom = "";
            vm.boxTop = "";
        }
    );
    $(".yellowArea").hover(
        function (e) {
            e.preventDefault();
            vm.boxRigth = "酒店资产管理服务"
            $('.blueImage').attr('src', './images/gray1-1.png');

        },
        function (e) {
            $('.blueImage').attr('src', './images/blue1.png');
            
        }
    );
    $(".blueArea").hover(
        function (e) {
            e.preventDefault();
            vm.boxLeft = "旅游及酒店咨询服务";
            $('.yellowImage').attr('src', './images/gray2-1.png');
        },
        function (e) {
            $('.yellowImage').attr('src', './images/yellow1.png');
        }
    );
    $('#hello').click(function (e) {
        e.preventDefault();
        testAnim('rubberBand');
    });

    // $('.js--animations').change(function () {
    //     var anim = $(this).val();
    //     testAnim(anim);
    // });
});